<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification } from '@arco-design/web-vue';
  import { queryProgramManagCount } from '@/api/sorting-matching';
  import Detailed from './detailed.vue';

  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });

  const detailedDrawer = ref<boolean>(false);
  const objectInfo = ref<any>({});
  // 分拣台数据
  const localTable = ref<any[]>([]);
  async function handleSearch() {
    const data = await queryProgramManagCount({});

    if (data.retCode === '200') {
      localTable.value = data.responseBody?.countList;
    } else {
      Notification.error({
        title: '错误',
        content: data.message,
        closable: true,
      });
    }
  }
  onMounted(() => {
    handleSearch();
  });
</script>

<template>
  <a-row :gutter="8">
    <a-col v-for="(item, index) in localTable" :key="index" :span="12">
      <a-card
        :header-style="hStyle"
        hoverable
        @click="
          (detailedDrawer = !detailedDrawer),
            (objectInfo.consoleId = item.consoleId),
            (objectInfo.consoleName = item.consoleName),
            (objectInfo.daysList = item.daysList),
            (objectInfo.monthlist = item.monthlist)
        "
      >
        <template #title>
          <div class="font">{{ item.consoleName }}</div>
        </template>
        <a-list :bordered="false" size="small">
          <a-list-item class="font-size">
            工作台IP：
            <span style="font-weight: 600">
              {{ item.sortingIp }}
            </span>
          </a-list-item>

          <a-list-item class="font-size">
            双周内未完成任务数量：<span style="font-weight: 600">{{
              item.countTwoWeeksUnsorted
            }}</span>
          </a-list-item>
          <a-list-item class="font-size">
            一个月内完成任务数量：<span style="font-weight: 600">{{
              item.countOneMonthSorted
            }}</span>
          </a-list-item>
        </a-list>
      </a-card>
    </a-col>
    <a-col v-if="localTable.length === 0" :span="24" class="font">
      未查询到分拣台任务，可能网络波动。请刷新页面！
    </a-col>
  </a-row>
  <Detailed v-model:visible="detailedDrawer" :object-info="objectInfo" />
</template>

<style scoped>
  .font {
    font-weight: 600;
    font-size: 18px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .font-size {
    font-size: 18px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
</style>
